<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
            height: 700px;
            overflow: hidden;

        }

    </style>
</head>
<body>
<div id="main">
    <el-container style="height: 500px; border: 1px solid #eee">
<!--        :width="alenth"-->
        <el-aside width="210px" style="background-color: #545c64; overflow: hidden;">
            <h5 style="text-align: center; color: white">后台管理系统</h5>

            <el-menu    background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b" :default-openeds="['1','2']"> <!--默认展开-->
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>系统信息</template>
                    <el-menu-item-group>
<!--                        <template slot="title">分组一</template>-->
                        <el-menu-item index="1-1">大数据看板</el-menu-item>
<!--                        <el-menu-item index="1-2">选项2</el-menu-item>-->
                    </el-menu-item-group>


                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i>系统管理</template>
                    <el-menu-item-group>
<!--                        <template slot="title">分组一</template>-->
                        <el-menu-item index="2-1" @click="btnUrl('books.html')">图书管理</el-menu-item>
                        <el-menu-item index="2-2" @click="btnUrl('users.html')">用户管理</el-menu-item>
                    </el-menu-item-group>

                </el-submenu>

            </el-menu>


        </el-aside>

        <el-container style="height: 700px; overflow: hidden">
            <el-header style="text-align: right; font-size: 12px">
                <span>王小虎</span>
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-left: 25px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>查看</el-dropdown-item>
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item>删除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>

            </el-header>

            <el-main style="height: 700px; overflow: hidden; padding: 0px" >

                <!--<el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="审批人">
                        <el-input v-model="formInline.user" placeholder="审批人"></el-input>
                    </el-form-item>
                    <el-form-item label="活动区域">
                        <el-select v-model="formInline.region" placeholder="活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>

                <el-table height="500" :data="tableData" >
                    <el-table-column prop="date" label="日期" width="140">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                </el-table>

                <el-pagination
                        background
                        layout="sizes,prev, pager, next,total"
                        :total="50">
                </el-pagination>-->
<!--                <iframe src="books.html" height="700px" width="1250px"></iframe>-->
                <iframe :src="url" height="700px" width="1350px"></iframe>


            </el-main>
        </el-container>
    </el-container>

</div>

</body>
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el:'#main',
        data(){
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
                tableData: Array(20).fill(item),
                isCollapse: true,
                formInline: {
                    user: '',
                    region: ''
                },
                url:'../bigdata/index.html'
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            onSubmit() {
                console.log('submit!');
            },
            btnUrl(hre){
                this.url=hre;
            }
        }
    });
</script>

</html>